<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<script src="<c:url value='/resources/js/jquery.dataTables.js'/>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        /*event ketika selectTahun opsi nya dipilih.
        misal ketika tahun A terpilih, maka secara otomatis select periode hanya akan menampilkan periode
        dari tahun A saja.*/
        $("#selectTahun").change(function() {

            /*ambil idTahun dari selectTahun*/
            var idTahun = $("#selectTahun").attr("value");

            /*buat select periode hanya berisi opsi pilih*/
            $("select#periode").html("<option value=\"\">--pilih--</option>");

            /*jika idTahun null atau kosong, abaikan saja proses pencarian, biarkan select periode hanya beropsi pilih*/
            if (idTahun != null && idTahun.length > 0) {

                /*ambil data periode berdasarkan idTahun dengan JSON*/
                $.getJSON("/kab/periode/tahun/"+idTahun+".json", function(data) {

                    /*buat tag option baru untuk select periode yang berdasarkan idTahun*/
                    var options = "<option value=\"\">--pilih--</option>";
                    for (var i=0;i < data.length;i++){
                        var option = "<option value=\"" + data[i].id + "\">" + data[i].triwulan.triwulan + "</option>";
                        options = options.concat(option);
                    }

                    /*pasang tag options dari select periode yang baru*/
                    $("select#periode").html(options);
                });
            }
        });
    });
</script>

<div class="content">
    <c:url value="/sekolah/${sekolah.npsn}/jumlahSiswa" var="jumlahSiswa_url"/>

    <form:form action="${jumlahSiswa_url}" method="POST" modelAttribute="jumlahSiswa">
        <div class="blocksection">
            <div class="blockcontent">
                <h3>Masukkan Data Jumlah Siswa Baru
                    <a href="<c:url value='/sekolah/${sekolah.id}'/>">
                        <c:out value="${sekolah.nama}"/>
                    </a>
                </h3>
                <dl class="form-text">

<%--PERIODE-----------------------------------------------------------------------------------------------------------%>

                    <dt><label>Tahun :</label></dt>
                    <dd>
                        <select id="selectTahun" >
                            <option value="" selected="selected">--pilih--</option>
                            <c:forEach items="${tahunList}" var="tahunItem">
                                <option value="${tahunItem.id}">${tahunItem.tahun}</option>
                            </c:forEach>
                        </select>
                    </dd>

                    <dt>
                        <label for="periode">Periode : </label>
                    </dt>
                    <dd>
                        <form:select path="periode" id="periode">
                            <form:option label="--pilih--" value=""/>
                            <form:options items="${periodeList}" itemValue="id" itemLabel="triwulan.triwulan" />
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="periode"/>
                    </dd>

<%--IF SD-------------------------------------------------------------------------------------------------------------%>
                    <c:if test="${sekolah.jenjangSekolah == 'SD'}">
<%--KELAS 1-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas1L">Kelas 1 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas1L" id="kelas1L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas1L"/>
                        <p class="description">Masukkan Kucuran Jumlah Siswa Kelas 1 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas1P">Kelas 1 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas1P" id="kelas1P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas1P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 1 Perempuan</p>
                    </dd>

<%--KELAS 2-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas2L">Kelas 2 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas2L" id="kelas2L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas2L"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 2 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas2P">Kelas 2 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas2P" id="kelas2P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas2P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 2 Perempuan</p>
                    </dd>

<%--KELAS 3-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas3L">Kelas 3 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas3L" id="kelas3L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas3L"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 3 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas3P">Kelas 3 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas3P" id="kelas3P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas3P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 3 Perempuan</p>
                    </dd>

<%--KELAS 4-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas4L">Kelas 4 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas4L" id="kelas4L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas4L"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 4 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas4P">Kelas 4 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas4P" id="kelas4P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas4P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 4 Perempuan</p>
                    </dd>

<%--KELAS 5-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas5L">Kelas 5 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas5L" id="kelas5L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas5L"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 5 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas5P">Kelas 5 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas5P" id="kelas5P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas5P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 5 Perempuan</p>
                    </dd>

<%--KELAS 6-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas6L">Kelas 6 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas6L" id="kelas6L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas6L"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 6 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas6P">Kelas 6 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas6P" id="kelas6P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas6P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 6 Perempuan</p>
                    </dd>

                    </c:if>
<%--END IF SD---------------------------------------------------------------------------------------------------------%>

<%--IF SMP------------------------------------------------------------------------------------------------------------%>
                    <c:if test="${sekolah.jenjangSekolah == 'SMP'}">
<%--KELAS 7-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas7L">Kelas 7 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas7L" id="kelas7L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas7L"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 7 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas7P">Kelas 7 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas7P" id="kelas7P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas7P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 7 Perempuan</p>
                    </dd>

<%--KELAS 8-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas8L">Kelas 8 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas8L" id="kelas8L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas8L"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 8 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas8P">Kelas 8 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas8P" id="kelas8P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas8P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 8 Perempuan</p>
                    </dd>

<%--KELAS 9-----------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="kelas9L">Kelas 9 Laki-laki:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas9L" id="kelas9L"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas9L"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 9 Laki-laki</p>
                    </dd>
                    <dt>
                        <label for="kelas9P">Kelas 9 Perempuan:</label>
                    </dt>
                    <dd>
                        <form:input path="kelas9P" id="kelas9P"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="kelas9P"/>
                        <p class="description">Masukkan Jumlah Siswa Kelas 9 Perempuan</p>
                    </dd>

                    </c:if>
<%--END IF SMP--------------------------------------------------------------------------------------------------------%>
                    
<%--Umur--------------------------------------------------------------------------------------------------------------%>
<%--IF SD-------------------------------------------------------------------------------------------------------------%>
                    <c:if test="${sekolah.jenjangSekolah == 'SD'}">

                        <dt>
                            <label for="umur6">Umur kurang 6 tahun:</label>
                        </dt>
                        <dd>
                            <form:input path="umur6" id="umur6"/>
                            <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="umur6"/>
                            <p class="description">Masukkan Jumlah Siswa Kurang dari 6 Tahun</p>
                        </dd>

                    </c:if>
<%--ENDI IF SD--------------------------------------------------------------------------------------------------------%>

                    <dt>
                        <label for="umur7_12">Umur 7-12 tahun:</label>
                    </dt>
                    <dd>
                        <form:input path="umur7_12" id="umur7_12"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="umur7_12"/>
                        <p class="description">Masukkan Jumlah Siswa Umur 7-12 Tahun</p>
                    </dd>
                    <dt>
                        <label for="umur13">Umur lebih 13 tahun:</label>
                    </dt>
                    <dd>
                        <form:input path="umur13" id="umur13"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="umur13"/>
                        <p class="description">Masukkan Jumlah Siswa Umur Lebih dari 13 tahun</p>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="form-button">
            <div class="buttonWrapper">
                <a href="<c:url value='/sekolah/${sekolah.npsn}/jumlahSiswa'/>" class="back">Kembali</a>
            </div>
            <input type="submit" value="Kirim" name="submit_1" id="submit_1"/>
            <input class="grey" type="reset" value="Hapus" name="reset_1" id="reset_1"/>
        </div>
    </form:form>
</div>